<template>
    <div ref="lineEchartsRef" style="width:100%;height:100% ;"></div>
</template>
<script setup>
import { onMounted, ref, getCurrentInstance, watch } from 'vue';
import * as echarts from 'echarts';
import tipImage from '../../assets/images/tooltip.png'
import { formatTipVlaue } from '@/utils';
import "echarts-gl";
const { proxy } = getCurrentInstance();
const scale = proxy.$scale;
const lineEchartsRef = ref();
const props = defineProps({
    xAxisData: {
        type: Object,
        required: true
    },
    yUnit: {//Y轴单位
        type: String
    },
    fixed: {
        type: Number,
        default: 1
    },
    seriesData: {
        type: Array,
        required: true,
        // default: [10, 10, 30, 12, 15, 3, 7]
    },
    areaColorFrom: {
        type: String,
        default: '#00FFFF'
    },
    areaColorTo: {
        type: String,
        default: 'rgba(65, 179, 255, 0)'
    },
    tipLabel: {
        tyep: String,
        default: ''
    }
});
let myChart = null;
let xAxisList = [];
let optionsData = props.seriesData;
//监听数据变化，可以做更新图标操作
watch(() => props.seriesData, (val, oldVal) => {
    // console.log("LineEcharts Change>>>");
    optionsData = val;
    if (myChart) {
        setEchartsOption(myChart, optionsData);
    }
}, {
    deep: true
});
watch(() => props.xAxisData, (val, oldVal) => {
    xAxisList = val;
});

onMounted(() => {
    myChart = echarts.init(lineEchartsRef.value);
    setEchartsOption(myChart, optionsData);

    proxy.$bus.on('resize', (res) => {
        myChart.resize();
    })
})

const setEchartsOption = (myChart, optionData) => {
    const option = {
        // backgroundColor: '#000',
        grid: {
            containLabel: true,
            left: 5,
            top: 50 * scale,
            bottom: 5,//修改图标底部边距
            right: 5
        },
        tooltip: {
            show: true,
            trigger: 'axis',
            padding: [0, 0, 0, 0],
            axisPointer: {
                lineStyle: {
                    width: 1,
                    type: 'solid',
                    color: '#00D1FF'
                }
            },
            backgroundColor: 'transparent',
            borderColor: 'transparent',
            shadowColor: 'transparent',
            formatter: (val) => {
                let value = formatTipVlaue(val[0].data, props.fixed);
                return `<div style="width:150px;height:55px; background:url(${tipImage}) no-repeat;background-size:contain;padding:5px 10px;">
                              <p style="font-size:12px;color:rgba(214, 243, 255, 0.9);display:flex;align-items: center ;margin-top:0px">
                                <span>${props.tipLabel} :&nbsp;</span>
                                <span>${value} ${props.yUnit}</span>   
                              </p>
                              <p style="font-size:12px;color:rgba(214, 243, 255, 0.9);display:flex;align-items: center; margin-top:5px">
                                <span>时间 :&nbsp;</span>
                                <span>第${val[0].dataIndex}秒</span> 
                              </p>
                         </div>`
            },
        },
        textStyle: {
            color: 'rgba(221,247,255,1)',
        },
        xAxis: [{
            type: 'category',
            show: false,
            data: xAxisList,
            axisLine: {//X轴样式
                lineStyle: {
                    color: 'rgba(27, 126, 242, 0.5)',
                    type: 'solid'//实线
                }
            },
            axisTick: {
                show: false
            },

        }],
        yAxis: [{
            type: 'value',
            name: '单位：' + props.yUnit,
            interval: 10000,
            showMinLabel: true,
            showMaxLabel: true,
            nameGap: 15 * scale,
            nameTextStyle: {
                fontSize: 24 * scale,
                align: 'left'
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false,//不显示Y轴
            },
            axisLabel: {//设置X轴文本
                color: '#FFFFFF',
                fontSize: 24 * scale
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(27, 126, 242, 0.2)',
                    type: 'solid'//实线
                }
            }
        }],
        series: [{
            type: 'line',
            data: optionData,
            smooth: true,
            yAxisIndex: 0,
            symbol: 'circle',
            symbolSize: 5,//折线点的大小
            showSymbol: false,//控制是否显示折线点
            // emphasis: {
            //     scale: true, // 开启缩放动画  
            //     // 如果需要设置具体的缩放比例，可以指定为一个数值  例如：scale: 1.1 表示放大到 1.1 倍  
            // },
            itemStyle: {//折线点的样式
                color: "#fff",
                borderColor: "#00FFFF",
                borderWidth: 1,
            },
            lineStyle: {
                width: 0.5,
                color: props.areaColorFrom
            },
            areaStyle: { //区域填充样式
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: props.areaColorFrom },
                    { offset: 1, color: props.areaColorTo }
                ], false),
                shadowColor: 'rgba(0, 255, 255, 0.5)', //阴影颜色
                shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
            },
        }

        ]
    };
    myChart.setOption(option);
}
</script>
<style scoped></style>